<template>
  <div class="list-page-container custom-ant">
    <a-card>
      <div class="page-container">
        <div class="container-left">
          <SearchLeftTab title="选择供应商" :searchTabList="searchTabList" @successCallback="searchLeftTabCallback" />
        </div>
        <div class="container-right ml-10">
          <a-form layout="inline" @keyup.enter.native="handleSearch">
            <a-row :gutter="24">
              <a-col :md="8" :sm="24">
                <CompositeSearch
                  :fieldList="fieldList"
                  @getParams="getSearchValue"
                  @adSearch="onAdSearch"
                  @adClear="onAdClear"
                  @tagClick="onTagClick">
                  <template v-slot:ad-search-content>
                    <a-form-model
                      ref="adSearchFormRef"
                      :model="adSearchFormData"
                      layout="vertical">
                      <a-row :gutter="24">
                        <a-col :span="24">
                          <a-form-model-item label="创建时间">
                            <a-range-picker
                              v-model="createTime"
                              format="YYYY-MM-DD"
                              style="width:100%;"
                              @change="(timeRange, timeStringRange) => setTimeRange('createTimeStart', 'createTimeEnd', timeRange, timeStringRange)"/>
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </a-form-model>
                  </template>
                </CompositeSearch>
              </a-col>
            </a-row>
          </a-form>
          <a-tabs type="card" v-model="curTabValue" @change="tabChange">
            <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.tab"></a-tab-pane>
          </a-tabs>
          <div v-show="curTabValue === '0'">
            <a-table
              ref="table"
              rowKey="id"
              size="middle"
              bordered
              :loading="loading"
              :columns="columns"
              :dataSource="dataSource"
              :scroll="{ x: 1 }"
              :pagination="pagination"
              @change="tableChange">
              <span slot="date" slot-scope="text">{{ text | DateFormat }}</span>
              <template slot="isPass" slot-scope="text, record">
                <ASelectList v-if="isEdit" v-model="record.isPass" :isHasDict="false" :defaultOption="isPassOption" />
                <span v-else>{{ isPassEnum[text] || '' }}</span>
              </template>
              <template slot="action" slot-scope="text, record">
                <span class="cus-text" pointer @click="onEdit(record)">编辑</span>
              </template>
            </a-table>
          </div>
          <div v-show="curTabValue === '1'">
            <a-upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              disabled
              list-type="picture"
              :default-file-list="fileList"
              class="upload-list-inline"
            >
              <!-- <a-button v-if="isEdit" type="primary" class="mt-10"><a-icon type="upload" />上传图片</a-button> -->
            </a-upload>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import ListPageMixin from '@/mixins/ListPageMixin.js';
import optionsMixin from '@views/supplier-manage/specimen/optionsMixin.js';
import SearchLeftTab from '@views/supplier-manage/components/SearchLeftTab.vue'

export default {
  name: 'SpecimenIndex',
  mixins: [ ListPageMixin, optionsMixin ],
  components: {
    SearchLeftTab,
  },
  data() {
    return {
      searchTabList: [],
      adSearchFormData: {
        createTimeStart: '',
        createTimeEnd: '',
      },
      createTime: [],
      curTabValue: '0',
      tabList: [
        { tab: '样品信息', key: '0' },
        { tab: '样品图片', key: '1' },
      ],
      isPassEnum: {
        '0': '否',
        '1': '是',
      },
      dataSource: [],
      originalDataSource: [
        {
          materielCode: 'WL20242001',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242002',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242003',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '首次不符合，第2次寄送的样品则满足采购需求',
        },
        {
          materielCode: 'WL20242004',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242005',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242006',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242007',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242008',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242009',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        },
        {
          materielCode: 'WL20242010',
          materielName: '传感器ASG01',
          materielSpecification: 'A-082C-50W',
          designDemand: '需提交PPAP（生产件批准程序）文件包，包括DFMEA、PFMEA、控制计划等',
          demandQuantity: '2.00',
          demandDate: '2024-06-01',
          isPass: '1',
          actualCompletedQuantity: '2',
          actualCompletedData: '2024-05-28',
          remark: '',
        }
      ],
      fileList: [
        {
          uid: '-1',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-4',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-5',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-6',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-7',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-8',
          name: '传感器CRSO7-11.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
    }
  },
  created() {
    this.getSearchTabList();
    this.handleSearch();
  },
  methods: {
    getSearchTabList() {
      this.searchTabList = [
        { label: '广州盛世机械工具集团有限公司', value: '1' },
        { label: '河北盛世机械工具集团有限公司', value: '2' },
        { label: '河南盛世机械工具集团有限公司', value: '3' },
        { label: '广东盛世机械工具集团有限公司', value: '4' },
        { label: '广西盛世机械工具集团有限公司', value: '5' },
        { label: '上海盛世机械工具集团有限公司', value: '6' },
        { label: '海南盛世机械工具集团有限公司', value: '7' },
        { label: '湖北盛世机械工具集团有限公司', value: '8' },
        { label: '湖南盛世机械工具集团有限公司', value: '9' },
        { label: '江西盛世机械工具集团有限公司', value: '10' },
        { label: '福建盛世机械工具集团有限公司', value: '11' },
        { label: '北京盛世机械工具集团有限公司', value: '12' },
        { label: '山东盛世机械工具集团有限公司', value: '13' },
      ]
    },
    // 获取 搜索框参数
    getSearchValue(currentValue, selectFiledList) {
      console.log(currentValue, selectFiledList, 'getSearchValue');
      this.handleSearch();
    },
    // 确定搜索 高级搜索
    onAdSearch() {
      console.log(this.adSearchFormData, '确定搜索 高级搜索');
      this.handleSearch();
    },
    // 重置 高级搜索
    onAdClear() {
      console.log('重置 高级搜索');
    },
    onTagClick(data) {
      console.log(data, 'onTagClick');
      const { name } = data;
      if (['筛选组合01', '筛选组合02', '筛选组合03'].includes(name)) {
        this.adSearchFormData.supplierStatus = '1';
        this.adSearchFormData.approveStatus = '1';
      } else if (['筛选组合04', '筛选组合05', '筛选组合06'].includes(name)) {
        this.adSearchFormData.supplierStatus = '2';
        this.adSearchFormData.approveStatus = '2';
      } else {
        this.adSearchFormData.supplierStatus = '3';
        this.adSearchFormData.approveStatus = '3';
      }
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.onSelectClear();
        this.dataSource = this.originalDataSource
      }, 100)
    },
    searchLeftTabCallback(data) {
      if (data) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.onSelectClear();
          this.dataSource = this.originalDataSource.filter(item => item.supplierName === data.label);
        }, 100)
      } else {
        this.handleSearch();
      }
    },
    tabChange() {
    },
  }
}
</script>

<style lang="less" scoped>
.page-container {
  display: flex;
  .container-left {
  }
  .container-right {
    width: calc(100% - 250px);
  }
}

/* tile uploaded pictures */
.upload-list-inline /deep/ .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline /deep/ .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline /deep/ .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}

</style>